<template>
  <div id="popup">
    <div class="mask-tip">
      <div class="tip-img"><img src="../../assets/img/mask_tip.png" width="50"></div>
      <div class="tip">
        <p class="mask-tip-text">当前采用社保卡作为“一码通”</p>
        <p class="mask-tip-text">请先申领实体社保卡后再申领一码通</p>
      </div>
      <p style="padding: 0 15px 19px 15px;text-align: justify;text-align-last: center;color: #666666;
line-height: 26px;">
        您当前未申领一码通请先进行一码通申领，系统会自动为您开通主要民生领域相
        关服务，除此之外，还需要您确认开通医疗，卫生等领域的应用
      </p>
    </div>
    <Button>去申领</Button>
  </div>
</template>

<script>
import Button from "../code/Button";
export default {
  components: {
    Button
  }
};
</script>

<style lang="less" scoped>
#popup {
  width: 100%;
  height: 100%;
  position: fixed;
  background: url("../../assets/img/modal_mask.png");

  .mask-tip {
    width: 90%;
    position: relative;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    margin: 199px auto 0 auto;
    .tip-img {
      position: absolute;
      top: -25px;
      left: 50%;
      transform: translateX(-50%);
    }
    .tip {
      padding: 40px 0 15px 0;
      .mask-tip-text {
        color: #4663ff;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
      }
    }
  }
}
p {
  margin: 0;
  padding: 0;
}
</style>
